<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据表设计</title>
    <style>
        table{width:100%;}
        table td{border:1px solid #CCC;}
    </style>
</head>
<body>
<div id="app">
    <table>
        <tr>
            <td>列名</td>
            <td>
                <input type="text" v-model="setData.name" style="width:100%;">
            </td>
            <td>对应数据表的列名，一般为英文</td>
        </tr>
        <tr>
            <td>列显示名称</td>
            <td>
                <input type="text" v-model="setData.disc" style="width:100%;">
            </td>
            <td>一般为中文</td>
        </tr>
        <tr>
            <td>列填写说明</td>
            <td>
                <input type="text" v-model="setData.explain" style="width:100%;">
            </td>
            <td>一般为中文</td>
        </tr>
        <tr>
            <td>列类型</td>
            <td>
                <select v-model="setData.type" style="width:100%;">
                    <option :value="key" v-for="(value, key) in getData.typeData">{{value['text']}}</option>
                </select>
            </td>
            <td>一般为中文</td>
        </tr>
        <tr>
            <td>排序</td>
            <td>
                <input type="text" v-model="setData.sort">
            </td>
            <td>一般为中文</td>
        </tr>
        <tr v-show="typeValueShow">
            <td>列类型选项</td>
            <td>
                <input type="checkbox" v-model="getData.isTypeValueCustom" @change="typeValueCustomChange">自定义获取方法
                <div v-show="getData.isTypeValueCustom">
                    表名：<input type="text" v-model="setData.type_value_custom.table">
                    显示文本列名：<input type="text" v-model="setData.type_value_custom.text">
                    值列名：<input type="text" v-model="setData.type_value_custom.id">
                    过滤：<input type="text" v-model="setData.type_value_custom.f">
                    树：<input type="checkbox" v-model="setData.type_value_custom.is_tree">是
                    父ID名称：<input type="text" v-model="setData.type_value_custom.tree_parent_id_name">
                </div>
                <div v-show="!getData.isTypeValueCustom">
                    <table>
                        <tr>
                            <th>显示文本</th>
                            <th>值</th>
                            <th>操作 <input type="button" value="添加列" @click="addTypeValueRow"></th>
                        </tr>
                        <tr v-for="(item, index) in setData.type_value">
                            <td><input type="text" v-model="item.text"></td>
                            <td><input type="text" v-model="item.id"></td>
                            <td><input type="button" value="删除列" @click="delTypeValueRow(index)"></td>
                        </tr>
                    </table>
                </div>
            </td>
            <td></td>
        </tr>
        <tr v-show="sourceShow">
            <td>列</td>
            <td>
                数据源变量名：<input type="text" v-model="setData.type_value_custom.source">
            </td>
            <td></td>
        </tr>
        <tr>
            <td>列显示属性</td>
            <td>
                <table>
                    <tr>
                        <th width="58">界面</th>
                        <th>其他</th>
                        <th>说明</th>
                    </tr>
                    <tr v-for="(value, key) in setData.show">
                        <td><input type="checkbox" v-model="value.checked" :checked="value.checked">{{value['text']}}</td>
                        <td>
                            <input type="text" v-model="value.cv" style="width:100%;">
                        </td>
                        <td>{{value.shuoming}}</td>
                    </tr>
                </table>
            </td>
            <td>接口也使用该设置</td>
        </tr>
        <tr>
            <td>列验证</td>
            <td>
                <input type="checkbox" v-model="setData.validate.require">不为空
            </td>
            <td></td>
        </tr>
        <tr>
            <td>搜索</td>
            <td>
                <input type="checkbox" v-model="setData.isSearch">是
                <table v-show="setData.isSearch == true">
                    <tr>
                        <td>显示名</td>
                        <td>
                            <input type="text" v-model="setData.search.text">
                        </td>
                        <td>类型</td>
                        <td>
                            <select v-model="setData.search.op">
                                <option :value="key" v-for="(value, key) in getData.searchData">{{value['text']}}</option>
                            </select>
                        </td>
                        <td>树</td>
                        <td>
                            <input type="checkbox" v-model="setData.search.is_tree">是
                        </td>
                        <td>父ID名称</td>
                        <td>
                            <input type="text" v-model="setData.search.tree_parent_id_name">
                        </td>
                    </tr>
                </table>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>生成结果 数据库字段</td>
            <td>
                <textarea style="width:100%;height:100px;">{{jieguo}}</textarea>
            </td>
            <td></td>
        </tr>
        <tr>
            <td>生成结果 模型 附加 搜索</td>
            <td>
                <textarea style="width:100%;height:40px;">{{jieguoSearch}}</textarea>
            </td>
            <td></td>
        </tr>
        <tr v-show="value.checked" v-for="(value, key) in setData.show">
            <td>生成结果 模型 附加 {{value.text}}</td>
            <td>
                <textarea style="width:100%;height:60px;">{{jieguoField(key)}}</textarea>
            </td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">
                <input type="button" value="测试按钮" @click="test">
                <input type="button" value="反向解析" @click="analysis">
            </td>
        </tr>
        <tr>
            <td>反向解析 内容</td>
            <td>
                <textarea style="width:100%;height:100px;" v-model="analysis_content"></textarea>
            </td>
            <td></td>
        </tr>
    </table>
</div>

<script src="https://cdn.staticfile.org/vue/2.5.13/vue.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            setData:{
                disc:''
                ,name: ''
                ,explain: ''
                ,type: 'text'
                ,sort:0
                ,type_value_custom:{'table':'','id':'','text':'','f':'','source':'','is_tree':false,'tree_parent_id_name':''}   //自定义获取方法 后端程序会判断是否存在这个值，如果存在优先使用
                ,type_value: []
                // ,show:["list","add","edit","view"]
                ,show:{
                    'list':{'text':'列表','checked':true,'custom':false,'cv':'','shuoming':'显示时处理的自定义方法'}
                    , 'add':{'text':'添加','checked':true,'custom':false,'cv':'','shuoming':'下拉菜单之类的'}
                    , 'edit':{'text':'编辑','checked':true,'custom':false,'cv':'','shuoming':'下拉菜单之类的'}
                    , 'view':{'text':'查看','checked':true,'custom':false,'cv':'','shuoming':'显示时处理的自定义方法'}
                }
                ,validate:{
                    require:false
                }
                ,isSearch : false
                ,search:{
                    text:''
                    ,op:'='
                    ,is_tree:false
                }
            }
            ,
            getData:{
                isTypeValueCustom:false // 是否自定义获取方法
                ,
                showData: {
                    'list':{'text':'列表'}
                    , 'add':{'text':'添加'}
                    , 'edit':{'text':'编辑'}
                    , 'view':{'text':'查看'}
                }
                ,searchData: {
                    '=':{'text':'等于'}
                    ,'LIKE':{'text':'LIKE'}
                    ,'IN':{'text':'IN'}
                }
                ,typeData: {
                    'hidden':{'text':'隐藏域 hidden'}
                    , 'text':{'text':'文本框 text'}
                    , 'text_money':{'text':'文本框 价格 单位分 输入元自动转分存储'}
                    , 'textarea':{'text':'文本框 textarea'}
                    , 'umeditor':{'text':'富文本编辑器'}
                    , 'password':{'text':'密码框 password'}
                    , 'image_select':{'text':'图片选择框'}
                    , 'radio':{'typeValueShow':true,'text':'单选 radio'}
                    , 'select':{'typeValueShow':true,'text':'下拉 select'}
                    , 'select_empty':{'typeValueShow':true,'text':'下拉 select 可空'}
                    , 'select_source':{'typeValueShow':true,'sourceShow':true,'text':'下拉 select 自定义数据源'}
                    , 'date_select':{'text':'日期选择器 字段类型 int'}
                    , 'time_select':{'text':'时间选择器 字段类型 int'}
                    , 'datetime_select':{'text':'日期和时间选择器 字段类型 int'}
                }
            }
            ,
            analysis_content:''
        }
        ,computed:{
            search_text:function () {

            }
            ,jieguo:function () {
                var jieguo = JSON.parse(JSON.stringify(this.$data['setData']));
                // 去掉说明之类的
                for (var key in jieguo['show']){
                    delete jieguo['show'][key]['custom'];
                    delete jieguo['show'][key]['shuoming'];
                    delete jieguo['show'][key]['text'];
                }
                if(this.getData.isTypeValueCustom){
                    jieguo['type_value'] = [];
                }else if(this.sourceShow){
                    // jieguo['type_value_custom'] = {
                    //     'source' : jieguo['type_value_custom']['source']
                    // };
                }
                else{
                    // jieguo['type_value_custom'] = {'table':'','id':'','text':''};
                    jieguo['type_value_custom'] = null;
                }
                return JSON.stringify(jieguo);
            }
            ,jieguoSearch:function () {
                var linshi = JSON.parse(this.jieguo);
                if(false == linshi['isSearch']){
                    return '';
                }
                linshi['search']['key'] = linshi['name'];
                linshi['search']['type'] = linshi['type'];
                if(linshi['type_value_custom']){
                    linshi['search']['type_value_custom'] = linshi['type_value_custom'];
                }
                if(linshi['type_value'] && linshi['type_value'].length){
                    linshi['search']['type_value'] = linshi['type_value'];
                }
                return JSON.stringify(linshi['search']);
            }
            ,
            typeValueShow:function () {
                var showItem = this.getData.typeData[this.setData.type];
                return showItem['typeValueShow'] == true;
            }
            ,
            sourceShow:function () {
                var showItem = this.getData.typeData[this.setData.type];
                return showItem['sourceShow'] == true;
            }
        }
        ,methods:{
            test:function () {
                var sdfsdf = this.getData.typeData[this.setData.type];
                console.log(sdfsdf['typeValueShow']);
            }
            ,
            analysis:function () {
                var _this = this;
                if(!_this.analysis_content){
                    alert('请输入反向解析的内容');
                    return;
                }

                var linshi = JSON.parse(_this.analysis_content);

                _this.setData['disc'] = linshi['disc'];
                _this.setData['name'] = linshi['name'];
                _this.setData['explain'] = linshi['explain'];
                _this.setData['type'] = linshi['type'];
                _this.setData['sort'] = linshi['sort'];
                if(linshi['type_value_custom']){
                    _this.setData['type_value_custom'] = linshi['type_value_custom'];
                    _this.getData.isTypeValueCustom = true;
                }
                if(linshi['type_value'].length){
                    _this.setData['type_value'] = linshi['type_value'];
                }
                _this.setData['validate'] = linshi['validate'];
                if(true == linshi['isSearch']){
                    _this.setData['isSearch'] = linshi['isSearch'];
                    _this.setData['search']['text'] = linshi['search']['text'];
                    _this.setData['search']['op'] = linshi['search']['op'];
                    if(linshi['search']['is_tree']){
                        _this.setData['search']['is_tree'] = linshi['search']['is_tree'];
                        if(linshi['search']['tree_parent_id_name']){
                            _this.setData['search']['tree_parent_id_name'] = linshi['search']['tree_parent_id_name'];
                        }
                    }
                }
                //  设置显示的列
                for (var key in linshi['show']) {
                    _this.setData.show[key]['checked'] = linshi['show'][key]['checked'];
                    _this.setData.show[key]['cv'] = linshi['show'][key]['cv'];
                }
            }
            ,
            typeValueCustomChange:function () {

            }
            ,
            addTypeValueRow:function () {
                this.setData.type_value.push({
                    'text':''
                    ,'id':''
                })
            }
            ,
            delTypeValueRow:function (_index) {
                this.setData.type_value.splice(_index, 1);
            }
            ,
            jieguoField:function (_type) {
                var linshi = JSON.parse(this.jieguo);
                var fanhui = {
                    'name' : linshi['name']
                    ,'text' : linshi['disc']
                    ,'type' : linshi['type']
                    ,'sort' : linshi['sort']
                    ,'explain' : linshi['explain']
                    ,'validate' : linshi['validate']
                    ,'cv' : linshi['show'][_type]['cv']
                };

                if(linshi['type_value'].length){
                    fanhui['type_value'] = linshi['type_value'];
                }

                if(linshi['type_value_custom']){
                    fanhui['type_value_custom'] = linshi['type_value_custom'];
                    if(true == linshi['type_value_custom']['is_tree']){
                        fanhui['is_tree'] = true;
                        fanhui['tree_parent_id_name'] = linshi['type_value_custom']['tree_parent_id_name'];
                    }
                }

                return JSON.stringify(fanhui);
            }
        }
    })
</script>
</body>
</html>